import React from 'react';
import {Button, Icon, Tooltip, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect} from 'ecCom';
import {WeaLocaleProvider, WeaHelpfulTip} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

// 自定义页面，数据来源
class Content_29_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        href: this.props.tabData.href,
        moreHref: this.props.tabData.moreHref,
        showtype: this.props.tabData.showtype || this.props.tabNew.showtype.selected,
        pageHeight: this.props.tabData.pageHeight,
        componentProps: this.props.tabData.componentProps || [],
        contenttype: this.props.tabData.contenttype || '1',
        isdelshow: -1,
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.delProps = this.delProps.bind(this);
        this.setProps = this.setProps.bind(this);
        this.addProps = this.addProps.bind(this);
    }
    addProps(){
        const { componentProps } = this.state;
        componentProps.push({
            name: '',
            value: '',
        });
        this.setState({componentProps});
    }
    delProps(i){
        const { componentProps } = this.state;
        componentProps.splice(i,1);
        this.setState({componentProps});
    }
    setProps(value, type, i){
        const { componentProps } = this.state;
        let item = componentProps[i];
        item[type] = value;
        componentProps.splice(i,1,item);
        this.setState({componentProps});
    }
    render() {
        const { title, href, moreHref, showtype, pageHeight,contenttype,componentProps, isdelshow } = this.state;
        const {tabNew} = this.props;
        let height = 316;
        if(contenttype == '2'){
            let length = componentProps.length;
            if(length > 3) length = 3;
            height = 362 + length * 35;
        }
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@pc8fsp`}
                className="portal-esetting-dialog"
                visible={true}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@z2hfqr`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lttcz5`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hgwb8w`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={value => this.setState({title: value})}/>
                    </WeaFormItem>

                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f8l8z1`} label={getLabel(20017, '引用地址')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ywuc5k`} value={href} onChange={value => this.setState({href: value})}/>
                        <div style={{position: 'absolute', top: '6px', right: '-22px'}}>
                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@6281v0`}
                                width =  {196} //如果要自定义宽度，在这里设置
                                title={getLabel(386567, '外部地址，请在地址前加上http://或https://')}
                                isCenter={true}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lj04bq`} label={getLabel(386568, '加载方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@caur5w`}
                            options={
                                tabNew.showtype.options.map((item) => {
                                    return {key: item.key, selected: false, showname: item.value};
                                })
                            }
                            value={showtype}
                            style={{width: '100px'}}
                            onChange={value => {
                                this.setState({showtype: value});
                            }}
                        />
                    </WeaFormItem>

                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@njcrfo`} label={getLabel(386563, 'More地址')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@2p9qje`} value={moreHref} onChange={value => this.setState({moreHref: value})}/>
                        <div style={{position: 'absolute', top: '6px', right: '-22px'}}>
                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@69tgtz`}
                                width =  {196} //如果要自定义宽度，在这里设置
                                title={getLabel(386567, '外部地址，请在地址前加上http://或https://')}
                                isCenter={true}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6b5vav`} label={getLabel(21568, '页面高度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@8bo22v`} value={pageHeight} onChange={value => this.setState({pageHeight: value})}/>
                        <div style={{position: 'absolute', top: '6px', right: '-22px'}}>px</div>
                    </WeaFormItem>
                </WeaSearchGroup>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@trljbr`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e6dtff`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        if (!this.state.title) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {
            this.props.onOk(this.state);
        }
    }

    onCancel() {
        this.props.onCancel();
    }
}

export default Content_29_DataSource;
